<template>
    <el-cascader
            :options="data"
            v-model="selectedOptions"
            @change="handleChange"
            :change-on-select="true"
            size="mini"
            placeholder="请选择省市区"
           :props="option">
    </el-cascader>
</template>

<script>
    import city from "../../common/lib/city";

    export default {
        name: "City",
        props:{
          value:{
              type:String,
              required:false
          }
        },
        created(){
            if(this.value){
                this.selectedOptions=this.value.split("/")
            }
        },
        watch:{
            value:{
                handler:function (val) {
                    if(this.value){
                        this.selectedOptions=this.value.split("/")
                    }

                },
                immediate:true
            }
        },
        data(){
            return{
                data:city,
                selectedOptions:[],
                option:{
                    value:'label',
                    label:'label'
                }
            }
        },
        methods: {
            handleChange(value) {
                this.$emit("input",value.join("/"));
                this.$emit("change",value);
            },
            clear(){
                this.selectedOptions=[]
            }
        }
    }
</script>

<style scoped>

</style>
